<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>生命周期钩子</h2>
      <p>count: {{ count }}</p>
      <button @click="count++">++</button>
      <ul>
        <li v-for="item in list" :key="item._id">{{ item.title }}</li>
      </ul>
    </div>

    <script src="./lib/vue3.js"></script>
    <script>
      const { createApp } = Vue;

      createApp({
        data() {
          return {
            count: 3,
            list: [],
          };
        },

        methods: {
          fn() {},
        },

        // 有了template就相当于给#app的元素添加了innerHTML属性
        // template: `
        //   <div>12345</div>
        // `,

        // 只有创建阶段和挂载阶段的生命周期会在打开页面的时候自动执行
        // 数据请求可以在created,beforeMount,mounted里面都能做

        // 创建阶段
        beforeCreate() {
          // 里面拿不到data以及methods等的数据的
          // 因为拿不到data，所以不要在这里做数据请求
          console.log("beforeCreate", this.count, this.fn);

          // fetch("http://www.pudge.wang:3080/api/rated/list")
          //   .then((response) => response.json())
          //   .then((res) => {
          //     console.log(res);
          //     this.list = res.result;
          //   });
        },
        // vue自己去初始化了选项
        created() {
          console.log("created", this.count, this.fn);
        },

        // vue自己去判断是否添加了template选项

        // 挂载阶段
        beforeMount() {
          // 在这里还不能拿到页面的任何信息的，因为页面还没有被渲染
          // 所以这里是拿不到任何元素相关的信息的
          console.log("beforeMount", document.querySelector("#app").innerHTML);
        },

        // vue自己去初始化了渲染创建和插入dom节点

        mounted() {
          // 这里就已经页面渲染完成了
          console.log("mounted", document.querySelector("#app").innerHTML);
          // fetch("http://www.pudge.wang:3080/api/rated/list")
          //   .then((response) => response.json())
          //   .then((res) => {
          //     console.log(res);
          //     this.list = res.result;
          //   });
        },

        // 更新阶段, 不会自动执行的
        // 需要有数据改变才会执行
        // 不是数据改变的前后，是页面重新渲染的前后
        beforeUpdate() {
          console.log(
            "beforeUpdate",
            this.count,
            document.querySelector("p").innerHTML
          );
        },
        // vue自己重新渲染了页面
        updated() {
          // 在这里不要去修改数据，会造成死循环
          console.log(
            "updated",
            this.count,
            document.querySelector("p").innerHTML
          );
          this.count++;
        },

        // 销毁阶段
        beforeUnmount() {
          console.log("beforeUnmount");
        },
        unmounted() {
          console.log("unmounted");
        },
      }).mount("#app");
    </script>
  </body>
</html>
